<template>
  <form class="upload_form">
    <div class="upload_top">
      发布/更改商品
      <i class="upload_cancel" @click="closeUpload">x</i>
    </div>
    <div class="place">
      <span class="repair"
        ><label for="upload_name">商品描述：</label>
        <textarea
          name="upload_name"
          id="upload_name"
          placeholder="请输入商品名称"
          cols="30"
          autocomplete="off"
          ref= "title"
        ></textarea
        ><br
      /></span>
      <span>上传图片：<input type="file" ref="img" id="img"><br /></span>
      <span
        ><label for="price">价格：</label
        ><input type="text" placeholder="请输入价格" id="price" autocomplete="off" ref="price"/><br
      /></span>
      <span
        ><label for="num">数量：</label
        ><input type="text" placeholder="请输入数量" id="num" autocomplete="off" ref="num"/><br
      /></span>
      <span
        ><input type="button" value="确认/修改" class="op" @click="changeGood"/>
        <input type="reset" value="重置" class="op" ref="reset"
      /></span>
    </div>
  </form>
</template>

<script>
import { Toast } from 'vant'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'UploadAndAlter',
  data () {
    return {
    }
  },
  props: {
    value: {
      type: Boolean
    }
  },
  computed: {
    ...mapState(['uploadGoods', 'userInfo', 'nowUser'])
  },
  methods: {
    ...mapMutations(['uploadGoodsAdd', 'goodsListsAdd']),
    closeUpload (e) {
      this.$emit('input', e.target.value = false)
    },
    changeGood () {
      console.log(+new Date())
      // console.log(this.$refs.title.value.trim())
      // window.createObjectURL((this.$refs.img.files[0]))
      // if (typeof FileReader === 'undefined') {
      //   alert('不支持')
      // } else {
      //   alert('支持')
      // }
      // console.log(this.$refs.img.files[0])
      // const reader = new FileReader()
      // reader.readAsDataURL(this.$refs.img.files[0])
      // reader.onloadstart = function () {
      //   console.log('文件上传处理......')
      // }
      // alert(reader.result)
      // console.log(this.$refs.price.value.trim())
      if (this.$refs.title.value.trim() !== '' && this.$refs.img.value !== '' && this.$refs.price.value.trim() !== '' && this.$refs.num.value.trim() !== '') {
        // 验证图片的大小并限制上传
        const reader = new FileReader()
        reader.readAsDataURL(this.$refs.img.files[0])
        if (this.$refs.img.files[0].size / 1024 / 1024 > 2) {
          alert('请上传小于2MB的图片')
          this.$refs.reset.click()
          return
        }
        Toast({
          message: '上传成功', position: top
        })
        setTimeout(() => {
          const obj = {
            id: +new Date(),
            title: this.$refs.title.value.trim(),
            img: reader.result,
            price: this.$refs.price.value.trim(),
            author: this.nowUser.username,
            num: this.$refs.num.value.trim()
          }
          this.uploadGoodsAdd(obj)
          this.goodsListsAdd(obj)
        }, 1000)
      } else {
        Toast('请输入完整的信息')
      }
    }
  }
}
</script>

<style scoped>
/* 闲置发布框框 */
.upload_form {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 660px;
  height: 480px;
  text-align: center;
  font-size: 18px;
  color: black;
  /* margin: 0 auto; */
  border: 1px solid rgb(230, 224, 224);
  background-color: white;
  border-radius: 4px;
  margin-top: 5px;
  /* text-align: center; */
  z-index: 1;
  /* border-radius: 4px; */
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
}
.upload_top {
  position: relative;
  margin: 0;
  padding: 0 30px 0 18px;
  height: 38px;
  line-height: 38px;
  z-index: 10;
  border-bottom: 1px solid #191919;
  border-radius: 4px 4px 0 0;
  background: #2d2d2d;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}
.upload_cancel {
  position: absolute;
  z-index: 20;
  top: 16px;
  right: 20px;
  width: 10px;
  height: 10px;
  color: white;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  background: url(https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9660125932/c989/d009/7328/c3811556cb5c698eee7b2b7394413b1f.png)
    no-repeat;
  background-position: 0 -95px;
  text-align: left;
  font-size: inherit;
}
.place {
  margin-top: 20px;
  /* margin-left: 30px; */
}

.place span {
  display: inline-block;
  width: 600px;
  margin-top: 18px;
}

#upload_name {
  width: 200px;
  height: 100px;
  padding: 5px 15px;
  border: 1px solid rgb(230, 224, 224);
  border-radius: 5px;
  text-align: left;
  outline: none;
  resize: none;
  vertical-align: top;
}
#price,
#num {
  width: 200px;
  height: 35px;
  border: 1px solid rgb(230, 224, 224);
  border-radius: 35px;
  text-align: center;
  outline: none;
}

.repair {
  display: inline-block;
  margin-right: 53px;
}

.op {
  border: 0;
  width: 100px;
  height: 50px;
  background: none;
  /* margin: 20px auto; */
  text-align: center;
  border: 1px solid #80bcdd;
  border-radius: 25px;
  outline: none;
  color: black;
  background-color: #80bcdd;
  cursor: pointer;
  margin: 10px;
}

.op:hover {
  background-color: #118adb;
  border: none;
}
</style>
